<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>
  <title>Document</title>
  <style>
    *{
      padding:0;
      margin: 0;
    }
    canvas{
      width:100%;
      height:100%;
    }
  </style>
</head>

<body>
  <script src="./three.js"></script>
  <script>
    console.dir(THREE.Scene);
    var scene = new THREE.Scene();

    var camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    var animate = function () {
      requestAnimationFrame(animate);

      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      renderer.render(scene, camera);
    };

    animate();
  </script>
</body>

</html>